<template>
  <div class="container">
    <div>
      <el-row :gutter="20">
        <el-col :span="6">
          <el-form ref="form" :model="form" label-width="100px">
            <!-- <el-form-item label="选择日期：">
              <el-date-picker
                v-model="form.valueDay"
                type="month"
                placeholder="选择日期"
                value-format="yyyy-MM-dd"
              ></el-date-picker>
            </el-form-item> -->
            <el-form-item label="姓名：">
              <el-input
                style="width: 220px"
                v-model="NAME"
                placeholder="请输入环卫人员姓名"
                class="handle-input mr10"
              ></el-input>
            </el-form-item>
          </el-form>
        </el-col>
        <el-col :span="6">
          <el-form ref="form" :model="form">
            <el-form-item label="班组：">
              <el-select v-model="teamValue" placeholder>
                <el-option
                  v-for="item in teamList"
                  :key="item.CLIENT_NO"
                  :label="item.CLIENT_NAME"
                  :value="item.CLIENT_NO"
                ></el-option>
              </el-select>
            </el-form-item>
          </el-form>
        </el-col>
        <el-col :span="6">
          <el-form ref="form" :model="form" style="float: left">
            <el-button size="mini" type="primary" @click="getlistdata"
              >查 询</el-button
            >
            <el-button size="mini" type="success" @click="exportExcel">导 出</el-button>
            <!-- <el-button size="mini" type="success" @click="handleEdit2">新 增</el-button> -->
          </el-form>
        </el-col>
      </el-row>
      <!-- <el-row :gutter="0" style="margin-top: 20px;margin-bottom: 20px;">
        <el-col :span="3" :offset="7">
          <span>正常率：{{attendanceStatistics.NormalRate}}</span>
        </el-col>
        <el-col :span="3">
          <span>迟到率：{{attendanceStatistics.TardinessRate}}</span>
        </el-col>
        <el-col :span="3">
          <span>早退率：{{attendanceStatistics.EarlyRate}}</span>
        </el-col>
      </el-row> -->
    </div>
    <el-table
      v-loading="loading"
      :data="
        tableData.slice((currentPage - 1) * pageSize, currentPage * pageSize)
      "
      highlight-current-row
    >
      <!-- <el-table-column sortable prop="VID" label="编号" align="center"></el-table-column> -->
      <el-table-column
        prop="人员姓名"
        label="人员姓名"
        align="center"
      ></el-table-column>
      <el-table-column
        prop="所属班组"
        label="所属班组"
        align="center"
      ></el-table-column>
      <el-table-column
        prop="上午上班时间"
        label="上午上班时间"
        align="center"
      ></el-table-column>
      <el-table-column
        prop="上午下班时间"
        label="上午下班时间"
        align="center"
      ></el-table-column>
      <el-table-column
        prop="下午上班时间"
        label="下午上班时间"
        align="center"
      ></el-table-column>
      <el-table-column
        prop="下午下班时间"
        label="下午下班时间"
        align="center"
      ></el-table-column>
      <el-table-column label="操作" width="100">
        <template slot-scope="scope">
          <el-button type="text" @click="handleEdit2(scope.$index, scope.row)"
            >编辑</el-button
          >
        </template>
      </el-table-column>
    </el-table>
    <div class="pagination">
      <el-pagination
        background
        layout="total, sizes, prev, pager, next, jumper"
        :current-page="currentPage"
        :page-size="pageSize"
        :total="tableData.length"
        @size-change="handleSizeChange"
        @current-change="handlePageChange"
      ></el-pagination>
    </div>
    <!-- 修改列表 -->
    <el-dialog
      title="新增考勤时间信息"
      :visible.sync="isShowDialogUpdate"
      width="55%"
    >
      <el-form ref="form" :model="form"  class="flex">
        <el-form-item label="上午上班时间：" class="wid50">
          <el-input
            v-model="form.上午上班时间"
            placeholder="请输入上午上班时间"
            class="handle-input mr10"
          ></el-input>
        </el-form-item>
        <el-form-item label="上午下班时间："  class="wid50">
          <el-input
            v-model="form.上午下班时间"
            placeholder="请输入上午下班时间"
            class="handle-input mr10"
          ></el-input>
        </el-form-item>
        <el-form-item label="下午上班时间："  class="wid50">
          <el-input
            v-model="form.下午上班时间"
            placeholder="请输入下午上班时间"
            class="handle-input mr10"
          ></el-input>
        </el-form-item>
        <el-form-item label="下午下班时间："  class="wid50">
          <el-input
            v-model="form.下午下班时间"
            placeholder="请输入下午下班时间"
            class="handle-input mr10"
          ></el-input>
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button @click="isShowDialogUpdate = false">取 消</el-button>
        <el-button type="primary" @click="saveEdit()">确 定</el-button>
      </span>
    </el-dialog>
    <!-- 详情列表 -->
    <el-dialog
      :title="titleDialogDetail"
      :visible.sync="isShowDialogDetail"
      width="60%"
    >
      <el-row :gutter="0" style="margin-top: 20px; margin-bottom: 20px">
        <el-col :span="3" :offset="7">
          <span>正常率：{{ attendanceDetailStatistics.NormalRate }}</span>
        </el-col>
        <el-col :span="3">
          <span>迟到率：{{ attendanceDetailStatistics.TardinessRate }}</span>
        </el-col>
        <el-col :span="3">
          <span>早退率：{{ attendanceDetailStatistics.EarlyRate }}</span>
        </el-col>
      </el-row>
      <el-form class="dialogform">
        <el-table
          :data="attendanceMonthDetail.attendanceList"
          style="width: 100%"
          fit
          max-height="450"
        >
          <el-table-column
            prop="Name"
            label="姓名"
            align="center"
          ></el-table-column>
          <el-table-column
            prop="Cleanrance"
            label="清运队"
            align="center"
          ></el-table-column>
          <el-table-column
            prop="Team"
            label="班组"
            align="center"
          ></el-table-column>
          <el-table-column
            prop="WorkArea"
            label="作业范围"
            align="center"
          ></el-table-column>
          <el-table-column
            prop="WorkDate"
            label="日期"
            align="center"
          ></el-table-column>
          <el-table-column
            sortable
            prop="SwQianRu"
            label="上午签入"
            align="center"
          ></el-table-column>
          <el-table-column
            sortable
            prop="SwQianChu"
            label="上午签出"
            align="center"
          ></el-table-column>
          <el-table-column
            sortable
            prop="XwQianRu"
            label="下午签入"
            align="center"
          ></el-table-column>
          <el-table-column
            sortable
            prop="XwQianChu"
            label="下午签出"
            align="center"
          ></el-table-column>
        </el-table>
      </el-form>
    </el-dialog>
  </div>
</template>
<script>
import '@/assets/css/common.css'
import { formatDate } from '@/common/js/date.js'
import export2Excel from '@/utils/exportExcel/index.js'
export default {
  data () {
    return {
      currentPage: 1, //初始页
      pageSize: 10,    //    每页的数据
      loading: false,
      form: {
        radioData: '日',
        valueDay: formatDate(new Date(new Date() - 3600 * 1000 * 24), 'yyyy-MM-dd'),
        valueMonth: '',
        name: '',
        type: '',
        kqDay: '',
      },
      teamList: [],
      teamValue: '',
      NAME: '',
      isShowDialogUpdate: false,
      isShowDialogDetail: false,
      titleDialogDetail: '',
      attendanceMonthDetail: {},
      attendanceDetailStatistics: {},
      attendanceStatistics: {},
      tableData: [],
      selectKQType: [{
        value: '旷工',
        label: '旷工'
      }, {
        value: '迟到',
        label: '迟到'
      }, {
        value: '早退',
        label: '早退'
      }, {
        value: '请假',
        label: '请假'
      }, {
        value: '加班',
        label: '加班'
      }],
    }
  },
  created () {
    this.getTeamList();
  },
  methods: {
    async getTeamList () {

      const { data } = await this.$Http.get('/Worker/GetGroupListKQ?CLIENT_NO=' + localStorage.getItem('CLIENT_NO'))
      this.teamList = data
      this.teamValue = data[0].CLIENT_NO
      this.getlistdata()
    },
    async getlistdata () {
      this.currentPage = 1;
      // this.loading = true
      var url = 'Worker/GetWorkerAttendenceTime?ClientNo=' + this.teamValue + '&Name=' + this.NAME
      // console.log('url=' + url)
      const { data } = await this.$Http.get(url)
      // this.attendanceStatus = data.status
      this.tableData = data

      // this.attendanceStatistics = data.attendanceStatistics
      // this.loading = false
    },
    // 导出Excel
    exportExcel () {
      let excelName = '考勤时间信息列表'
      const tHeader = ['编号', '人员姓名', '所属班组', '上午上班时间', '上午下班时间', '下午上班时间', '下午下班时间']
      const filterVal = ['VID', '人员姓名', '所属班组', '上午上班时间', '上午下班时间', '下午上班时间', '下午下班时间']
      export2Excel(tHeader, filterVal, this.tableData, excelName)
    },
    async handleEdit2 (index, row) {
      this.form = Object.assign({}, row);
      this.isShowDialogUpdate = true
    },
    // 保存编辑
    async saveEdit () {
      this.$axios({
        url: 'Worker/UpdateWorkerAttendenceTime',
        method: 'get',
        params: {
          //  ID: this.form.ID,
          VID: this.form.VID,
          AM_IN: this.form.上午上班时间,
          AM_OUT: this.form.上午下班时间,
          PM_IN: this.form.下午上班时间,
          PM_OUT: this.form.下午下班时间,
        },

      }).then((res) => {
        console.log(this.data)
        console.log(res)
        if (res.data.IsSucess) {
          this.$message.success('编辑成功');
          this.isShowDialogUpdate = false
          this.getlistdata()
        } else {
          this.$message.error('编辑失败');
        }
      })
    },
    //详情
    async handleEdit (index, row) {
      //   this.idx = index;
      //   this.form = row;
      //   this.editVisible = true;
      const params = {
        ClientNo: this.teamValue,
        workDate: this.form.valueDay,
        vid: row.VID
      }
      this.titleDialogDetail = row.Name + '考勤记录(月)-详情'
      const { data } = await this.$Http.get('/DataListCompany/GetAttendanceDetailDatNAMEpi', { params })
      this.attendanceDetailStatistics = data.attendanceStatistics
      // this.attendanceMonthDetail.TardinessRate = data.attendanceStatistics.TardinessRate
      // this.attendanceMonthDetail.EarlyRate = data.attendanceStatistics.EarlyRate
      this.attendanceMonthDetail.attendanceList = data.detailList
      this.isShowDialogDetail = true
    },
    // 分页导航
    handlePageChange (currentPage) {
      this.currentPage = currentPage;
      // console.log(this.currentPage)
      // this.$set(this.query, 'pageIndex', val);
      // this.getData();
    },
    handleSizeChange (size) {
      this.pageSize = size;
      console.log(this.pageSize)
    }
  }
}
</script>
<style>
.content {
  overflow-y: scroll;
}
.el-col-6 {
  min-width: 400px;
  min-height: 50px;
}
.el-table th {
  height: 40px;
}
</style>